<template>
  <div class="app-container">

    <el-card class="box-card">
      <h3>{{title}}</h3>
      <el-form :model="data" :rules="rules" ref="data" label-width="150px">
        <el-form-item label="广告名称：" prop="name">
          <el-input v-model="data.name" class="input-width"></el-input>
        </el-form-item>
        <el-form-item label="图片：" prop="url">
          <single-upload v-model="data.url"
                         style="width: 300px;display: inline-block;margin-left: 10px"></single-upload>
        </el-form-item>
        <el-form-item label="是否启用：" prop="status">
          <el-switch v-model="data.status"></el-switch>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-card>
  </div>
</template>

<style>
  label {
    font-size: 14px;
    color: #606266;
  }
  .el-upload__tip {
    font-size: 12px;
    color: #606266;
    margin-top: 7px;
  }
</style>

<script>
  import {addData, getData, updateData} from '@/api/ad';
  import SingleUpload from '@/components/Upload/singleUpload'

  export default {
    name: 'adDetail',
    components: {
      SingleUpload
    },
    data() {
      return {
        title: '',
        data: {
          status:true,
        },
        list:[],
        type:{},
        rules: {
          name: [{required: true, message: '请输入广告名称', trigger: 'blur'}],
          url: [{required: true, message: '请上传图片', trigger: 'blur'}],
          status: [{required: true, message: '请选择是否启用', trigger: 'blur'}],
        },
        operateReasonId: null,
        roles:[],
      }
    },
    computed: {},
    created() {
      this.init();
    },
    methods: {
      init: function () {
        if (this.$route.query.id == null) {
          this.title = '添加广告'
          return
        } else {
          this.title = '修改广告'
          this.operateReasonId = this.$route.query.id
        }
        getData(this.$route.query.id).then(response => {
          this.data = response.data
        }).catch(reason => {})


      },
      handleCancel() {
        this.$router.push({
          path: '/promotion/ad'
        })
      },
      handleConfirm() {
        this.$refs['data'].validate(valid => {
          if (valid) {
            if (this.$route.query.id == null) {
              //添加操作
              addData(this.data).then(response => {
                this.$message({
                  message: '添加成功！',
                  type: 'success',
                  duration: 1000
                })
                this.$router.push({
                  path: '/promotion/ad'
                })
              }).catch(response=>{

              });
            } else {
              //编辑操作
              updateData(this.$route.query.id  , this.data).then(response => {
                this.dialogVisible = false;
                this.operateReasonId = null;
                this.$message({
                  message: '修改成功！',
                  type: 'success',
                  duration: 1000
                });
                this.$router.push({
                  path: '/promotion/ad'
                })
              }).catch(reason => {

              });
            }
          }
        })
      },
    },
  }
</script>
